<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>易知学社</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="/assets/web/css/double.css" />
		<link rel="stylesheet" type="text/css" href="/assets/web/css/index.css" />
		<link rel="stylesheet" type="text/css" href="/assets/web/js/swiper.min.css"/>
		<script src="/assets/web/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/assets/web/js/swiper.min.js"></script>
	</head>
	<body>
	<input type="hidden" value="${mobile}" id="mobile">
		<!-- 底部tab -->
		<ul class="foot">
			<li class="Imgbox" >
				<a href="index.html">
					<div class="xz-img">
						<img src="/assets/web/img/tabar_home012x.png" />
					</div>
					<p class="botm-title actives">首页</p>
				</a>
			</li>
			<li class="Imgbox" >
				<a href="../course/course.html">
					<div class="xz-img">
						<img src="/assets/web/img/tabar_course012x.png" />
					</div>
					<p class="botm-title ">课程</p>
				</a>
			</li>
			<li class="Imgbox" >
				<a href="../me/me.html">
					<div class="xz-img">
						<img src="/assets/web/img/tabar_user012x.png" />
					</div>
					<p class="botm-title ">我的</p>
				</a>
			</li>
		</ul>
		<h1>易知学社</h1>
		<!-- 搜索部分 -->
		<div class="search">
			<a href="search.html">
				<input type="search" placeholder="请输入搜索内容"/>
				<img src="/assets/web/img/search2x.png" >
			</a>
		</div>
		<!-- 首页tab部分 -->
		<div class="tab">
			@for(item in category){
			<a href="/wx/course/course?id=${item.id}" >${item.name}</a>
			@}
		</div>
		<!-- 轮播图 -->
		<div class="swiper-container">
		    <div class="swiper-wrapper">
				@for(item in banner){
		        <div class="swiper-slide"><img src="${item.img}"  onclick="location.href='${item.url}'"></div>
				@}
		    </div>
		</div>
		<script>
		var swiper = new Swiper('.swiper-container');
		</script>
		<!-- 横向滚动 -->
		<div class="scroll">
			<div class="title">
				<h2>免费课程</h2>
				<a href="#">全部 > </a>
			</div>
			<div class="swiper-containers">
			    <div class="swiper-wrapper">
					@for(item in free){
			        <div class="swiper-slide">
						<a href="/web/course/course?id=${item.id}"><img src="${item.cover}" >
						<h3>${item.name}</h3>
						<p>${item.categoryName}</p></a>
					</div>
                     @}
			    </div>
			    <!-- Add Scrollbar -->
			    <!-- <div class="swiper-scrollbar"></div> -->
			</div>
			<!-- Initialize Swiper -->
			<script>
			var swiper = new Swiper('.swiper-containers', {
			    // scrollbar: '.swiper-scrollbar',
			    scrollbarHide: true,
			    slidesPerView: 'auto',
			    // centeredSlides: true,
			    // spaceBetween: 30,
			    grabCursor: true
			});
			</script>
		</div>
		<!-- 推荐课程 -->
		<div class="course">
			<div class="title">
				<h2>推荐课程</h2>
				<a href="#">全部 > </a>
			</div>
			<ul>

				@for(item in hot){
				<li>
					<a href="/web/course/course?id=${item.id}" class="clearfix">
						<div class="fl left">
							<img src="${item.img}" class="fl">
							<div class="texts">
								<div class="top">
									<h3>${item.name}</h3>
									<p>${item.intro}</p>
								</div>
								<p><i>${item.categoryName}</i>${item.people}人已学习</p>
							</div>
						</div>
						<div class="fr right">
							<div class="price">
								¥${item.orgPrice}<br>
								<del>¥${item.price}</del>
							</div>
						</div>
					</a>
				</li>
                 @}
			</ul>
		</div>
	</body>
</html>
<script>
	$(document).ready(function(){
      var mobile=$("#mobile").val();
      alert(mobile);
      if(mobile==0){
	  }
	})



</script>
